<template>
	<view class="container">
		<uv-navbar title="选择素材" bg-color="none" @leftClick="leftClick"></uv-navbar>
		<view class="coupon-box">
			<!-- <view class="tab">
				<view class="tab-list">
					<view class="tab-item" :class="{'active': index == tab.active}" v-for="(item,index) in tab.list"
						:key="item.value" @click="ckTab(index)">{{item.title}}</view>
				</view>
			</view> -->
			<view class="image-list">
				<view class="upload" v-if="imageList.length < 9">
					<view class="upload-box">
						<image class="upload-image" src="../../static/images/index/tu1.png" mode=""></image>
						<view class="upload-text">上传照片</view>
					</view>
				</view>
				<view class="image-item" v-for="(item,index) in imageList" :key="index">
					<image :src="item" mode="aspectFill"></image>
					<view class="video" @click="preview">
						<uv-icon name="play-right-fill" color="#FFF" size="20"></uv-icon>
					</view>
					<view class="xuanz" @click="selectIndex(index)">
						<uv-icon name="checkmark-circle-fill" :color="index == select.index ? '#4635FF' : '#FFF'"
							size="20"></uv-icon>
					</view>
				</view>
			</view>
			<view class="button-fb" @click="nextStep">下一步</view>
		</view>
	</view>
</template>

<script>
	import {
		guid
	} from '@/uni_modules/uv-ui-tools/libs/function/index.js'
	const app = getApp();
	export default {
		data() {
			return {
				tab: {
					active: 0,
					list: [{
						title: '全部',
						value: 0
					}, {
						title: '场景1',
						value: 1
					}, {
						title: '场景2',
						value: 1
					}]
				},
				select: {
					index: null,
					value: ''
				},
				imageList: [
					"https://cdn.uviewui.com/uview/album/1.jpg",
					"https://cdn.uviewui.com/uview/album/1.jpg",
					"https://cdn.uviewui.com/uview/album/1.jpg",
					"https://cdn.uviewui.com/uview/album/1.jpg",
					"https://cdn.uviewui.com/uview/album/1.jpg",
					"https://cdn.uviewui.com/uview/album/1.jpg",
					"https://cdn.uviewui.com/uview/album/1.jpg",
				],
				loadStatus: 'loadmore',
				list: [], // 瀑布流全部数据
				list1: [], // 瀑布流第一列数据
				list2: [], // 瀑布流第二列数据
				leftGap: 12,
				rightGap: 12,
				columnGap: 10
			};
		},
		computed: {
			imageStyle(item) {
				return item => {
					const v = uni.upx2px(750) - this.leftGap - this.rightGap - this.columnGap;
					const w = v / 2;
					const rate = w / item.w;
					const h = rate * item.h;
					return {
						width: w + 'px',
						height: h + 'px'
					}
				}
			}
		},
		async onLoad() {
			const {
				data
			} = await this.getData();
			this.list = data;
		},
		// 触底加载更多
		async onReachBottom() {
			if (this.loadStatus == 'loadmore') {
				this.loadStatus = 'loading';
				const {
					data
				} = await this.getData();
				this.list.push.apply(this.list, data);
				this.loadStatus = 'loadmore';
			}
		},
		methods: {
			leftClick() {
				app.navigateBack()
			},
			ckTab(index) {
				if (this.tab.active != index) {
					this.tab.active = index
				}
			},
			// 这点非常重要：e.name在这里返回是list1或list2，要手动将数据追加到相应列
			changeList(e) {
				this[e.name].push(e.value);
			},
			// 模拟的后端数据
			getData() {
				return new Promise((resolve) => {
					const imgs = [{
							url: 'https://via.placeholder.com/100x110.png/3c9cff/fff',
						},
						{
							url: 'https://via.placeholder.com/200x220.png/f9ae3d/fff',
						},
						{
							url: 'https://via.placeholder.com/300x340.png/5ac725/fff',
						},
						{
							url: 'https://via.placeholder.com/400x400.png/f56c6c/fff',
						},
						{
							url: 'https://via.placeholder.com/500x510.png/909399/fff',
						},
						{
							url: 'https://via.placeholder.com/600x606.png/3c9cff/fff',
						},
						{
							url: 'https://via.placeholder.com/310x422.png/f1a532/fff',
						},
						{
							url: 'https://via.placeholder.com/320x430.png/3c9cff/fff',
						},
						{
							url: 'https://via.placeholder.com/330x424.png/f9ae3d/fff',
						},
						{
							url: 'https://via.placeholder.com/340x435.png/5ac725/fff',
						},
						{
							url: 'https://via.placeholder.com/350x440.png/f56c6c/fff',
						},
						{
							url: 'https://via.placeholder.com/380x470.png/909399/fff',
						}
					];
					let list = [];
					const doFn = (i) => {
						const randomIndex = Math.floor(Math.random() * 10);
						return {
							id: guid(),
							allowEdit: i == 0,
							image: imgs[randomIndex].url,
							w: imgs[randomIndex].width,
							h: imgs[randomIndex].height,
							desc: i % 2 == 0 ? `(${this.list.length + i + 1})欢迎使用uv-ui，uni-app生态专用的UI框架` :
								`(${this.list.length + i})开发者编写一套代码， 可发布到iOS、Android、H5、以及各种小程序`
						}
					};
					// 模拟异步
					setTimeout(() => {
						for (let i = 0; i < 20; i++) {
							list.push(doFn(i));
						}
						resolve({
							data: list
						});
					}, 200)
				})
			},
			preview() {
				wx.previewMedia({
					current: 0,
					sources: [{
						url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4',
						type: 'video',
						poster: 'https://cdn.uviewui.com/uview/album/1.jpg'
					}],
					success: (res) => {
						console.log(res);
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			selectIndex(index) {
				if (this.select.index != index) {
					this.select.index = index
				} else {
					this.select.index = null
				}
			},
			nextStep(){
				app.navigationTo('page_account/create/official')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		overflow: hidden;
		min-height: 100vh;
		width: 100vw;
		padding: 24rpx;
		// padding: 40rpx;
		padding-bottom: calc(96rpx + 32rpx + 24rpx);
		padding-top: 198rpx;
		box-sizing: border-box;
		background: radial-gradient(128% 128% at 95% 0%, #D7CEFF 0%, #BBE1FF 62%, #FFFFFF 95%);

		.button-fb {
			position: fixed;
			bottom: 32rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 480rpx;
			height: 96rpx;
			background: linear-gradient(180deg, #886AE6 0%, #4635FF 99%);
			border-radius: 48rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 96rpx;
			text-align: center;
		}

		.tab {
			margin-bottom: 30rpx;

			.tab-list {
				height: 120rpx;
				background: rgba(255, 255, 255, 0.3);
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				border: 2rpx solid #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 20rpx;
				box-sizing: border-box;

				.tab-item {
					// width: 306rpx;
					flex: 1;
					height: 80rpx;
					line-height: 80rpx;
					border-radius: 16rpx;
					font-weight: 500;
					font-size: 30rpx;
					color: #000000;
					text-align: center;

					&.active {
						background: linear-gradient(180deg, #886AE6 0%, #4635FF 99%);
						color: #FFFFFF;
					}
				}
			}

			/*  */
		}

		.waterfall-item {
			background: linear-gradient(180deg, #FFFFFF 64%, rgba(255, 255, 255, 0.62) 100%);
			border-radius: 16rpx;
			margin-bottom: 20rpx;

			.waterfall-item__image {
				position: relative;

				.video {
					position: absolute;
					top: 28rpx;
					right: 30rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 51rpx;
					height: 50rpx;
					background: rgba(216, 216, 216, 0.4);
					border-radius: 50%;
				}

			}

			image {
				border-radius: 16rpx;
			}

			.waterfall-item__ft {
				padding: 20rpx;
				box-sizing: border-box;

				.waterfall-item__ft__desc {
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;
					line-height: 44rpx;
				}
			}

			.waterfall-item__b {
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 0 20rpx 20rpx 20rpx;

				.waterfall-item__b_l {
					display: flex;
					align-items: center;
					justify-content: flex-start;
				}

				.look {
					width: 88rpx;
					height: 60rpx;
					background: linear-gradient(180deg, #886AE6 0%, #4635FF 99%);
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 60rpx;
					text-align: center;
				}
			}
		}

		/deep/ .uv-waterfall {
			justify-content: center
		}

		.image-list {
			display: flex;
			flex-wrap: wrap;
			width: 100%;

			.upload {
				width: calc(100% / 3 - 10rpx - 4rpx);
				padding-top: calc(100% / 3 - 10rpx - 4rpx);
				height: 0;
				position: relative;
				background: rgba(255, 255, 255, 0.3);
				border: 2rpx solid #FFFFFF;
				border-radius: 32rpx;
				flex-shrink: 0;
				margin-bottom: 10rpx;
				margin-right: 10rpx;

				.upload-box {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					border-radius: 32rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
				}

				.upload-image {
					width: 80rpx;
					height: 80rpx;
					margin-bottom: 20rpx;
				}

				.upload-text {
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;
					line-height: 44rpx;
					text-align: center;
				}
			}

			.image-item {
				width: calc(100% / 3 - 10rpx);
				padding-top: calc(100% / 3 - 10rpx);
				height: 0;
				flex-shrink: 0;
				position: relative;
				margin-bottom: 10rpx;
				margin-right: 10rpx;

				.video {
					position: absolute;
					left: calc(50% - 79rpx / 2);
					top: calc(50% - 73rpx / 2);
					display: flex;
					align-items: center;
					justify-content: center;
					width: 79rpx;
					height: 73rpx;
					background: rgba(216, 216, 216, 0.4);
					border-radius: 50%;
				}

				.xuanz {
					position: absolute;
					top: 10rpx;
					right: 12rpx;

					&.active-icon {
						color: #4635FF;
					}
				}

				image {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					border-radius: 32rpx;
				}

				.delete {
					display: flex;
					align-items: center;
					justify-content: center;
					position: absolute;
					top: 10rpx;
					right: 10rpx;
					border-radius: 50%;
					width: 32rpx;
					height: 32rpx;
					background: rgba(0, 0, 0, .2);
					z-index: 2;
				}
			}
		}
	}
</style>